<template>
    <div @click="turn(item)" class="item" :style="pad">
        <div class="img" >
            <img :src="imgUrl+item.logo" alt="">
        </div>
        <div class="info">
            <div class="name">
                <span >
                {{item.name}}
            </span>
            </div>
           <div class="keyword">
                <span >
                {{item.keyword}}
            </span>
           </div>
        </div>

        <div class="limit">
            <span>{{item.loanLimit}}</span>
            <my-svg class="left" :name="`icon-cc-right`"></my-svg>
        </div>

    </div>
</template>

<script>
    import mySvg from '../../base/svg'
    import {click} from "../../api/home";
    import * as ToastUtil from '../../cubeui/toast'
    export default {
        name: "index",
        components:{
            mySvg
        },
        props:{
            isTop:{
                type:Boolean,
                default:false
            },
            item:{
                type: Object
            }
        },
        data(){
            return {

            }
        },
        methods:{
            turn(item){
                click(item.id).then(res=>{
                    window.location.href = item.url
                })
            }
        },
        computed:{
            imgUrl(){
              return process.env.VUE_APP_IMG_URL
            },
            pad(){
                if(!this.isTop){
                    return 'padding:15px 0px 15px 12px'
                }else {
                    return 'padding:12px 0px 12px 10px'
                }
            }
        }
    }
</script>

<style type="text/stylus" lang="stylus">
    .item
        background-color #FFFFFF
        margin 0 10px
        display flex
        border-radius 5px
        align-items center
        position relative
        .img
            margin-right 15px
            flex 0 0 48px
            height 48px
            img
                border-radius 5px
                width 100%
                height 100%
        .info
            display flex
            flex-direction column
            justify-content center
            width 160px
            .name
                height 20px
                margin-bottom 5px
                font-size 14px
                color #444444
                span
                    line-height 20px
            .keyword
                word-wrap break-spaces
                display block
                color #a1a1a1
                font-size 12px
        .limit
            position absolute
            right 10px
            text-align right
            height 30px
            color #ff6c48
            display flex
            align-items center
            span
                vertical-align middle
                line-height 30px
                font-size 15px
            .left
                line-height 30px
                vertical-align middle
                font-size 25px



</style>
